<template>
  <div>
    <h2 v-big="sum"></h2>
    <h2 v-beack="name"></h2>
    <h2 v-beauty="name1"></h2>
  </div>
</template>

<script>

export default {
  name: "index",
  data() {
    return {
      sum:2,
      name:'张三',
      name1:'刘欢'
    }
  },
  directives:{
    big(element,{value}){
      element.innerText+=value*20
    },
    beack(element,{value}){
      // 配置的是在页面显示的文字
      element.innerText=value,
      // 配置文字的颜色
      element.style.color='red',
      // 配置背景色
      element.style.backgroundColor='blue',
      // 配置边框
      element.style.border='1px solid red'
    }
  }
};
</script>

<style scoped>
</style>